<template>
  <div class="iconify-button-example">
    <a-card title="使用 Iconify 图标的按钮示例" class="example-card">
      
      <!-- 原始 Ant Design 图标按钮 -->
      <div class="button-section">
        <h3>🔸 原始 Ant Design 图标按钮</h3>
        <a-space wrap>
          <a-button type="primary">
            <template #icon><SearchOutlined /></template>
            搜索
          </a-button>
          <a-button type="primary">
            <template #icon><PlusOutlined /></template>
            新增人员
          </a-button>
          <a-button danger>
            <template #icon><DeleteOutlined /></template>
            删除
          </a-button>
          <a-button>
            <template #icon><ImportOutlined /></template>
            导入数据
          </a-button>
          <a-button>
            <template #icon><ExportOutlined /></template>
            导出数据
          </a-button>
          <a-button>
            <template #icon><TeamOutlined /></template>
            队伍管理
          </a-button>
        </a-space>
      </div>

      <!-- 使用 Iconify 图标的按钮 -->
      <div class="button-section">
        <h3>✨ 使用 Iconify 图标的按钮</h3>
        <a-space wrap>
          <a-button type="primary">
            <template #icon><Icon icon="material-symbols:search" /></template>
            搜索
          </a-button>
          <a-button type="primary">
            <template #icon><Icon icon="material-symbols:person-add" /></template>
            新增人员
          </a-button>
          <a-button danger>
            <template #icon><Icon icon="material-symbols:delete" /></template>
            删除
          </a-button>
          <a-button>
            <template #icon><Icon icon="material-symbols:upload" /></template>
            导入数据
          </a-button>
          <a-button>
            <template #icon><Icon icon="material-symbols:download" /></template>
            导出数据
          </a-button>
          <a-button>
            <template #icon><Icon icon="material-symbols:team-dashboard" /></template>
            队伍管理
          </a-button>
        </a-space>
      </div>

      <!-- 更多样式的 Iconify 图标按钮 -->
      <div class="button-section">
        <h3>🎨 更多样式的 Iconify 图标按钮</h3>
        <a-space wrap>
          <a-button type="primary" size="large">
            <template #icon><Icon icon="material-symbols:analytics" /></template>
            数据分析
          </a-button>
          <a-button type="default" size="large">
            <template #icon><Icon icon="material-symbols:settings" /></template>
            设置
          </a-button>
          <a-button type="dashed" size="large">
            <template #icon><Icon icon="material-symbols:refresh" /></template>
            刷新
          </a-button>
          <a-button type="text" size="large">
            <template #icon><Icon icon="material-symbols:help" /></template>
            帮助
          </a-button>
        </a-space>
      </div>

      <!-- 游戏主题的图标按钮 -->
      <div class="button-section">
        <h3>🎮 游戏主题图标按钮</h3>
        <a-space wrap>
          <a-button type="primary">
            <template #icon><Icon icon="material-symbols:sports-esports" /></template>
            开始游戏
          </a-button>
          <a-button type="default">
            <template #icon><Icon icon="material-symbols:leaderboard" /></template>
            排行榜
          </a-button>
          <a-button type="default">
            <template #icon><Icon icon="material-symbols:trophy" /></template>
            成就
          </a-button>
          <a-button type="default">
            <template #icon><Icon icon="material-symbols:shield" /></template>
            防御
          </a-button>
          <a-button type="default">
            <template #icon><Icon icon="material-symbols:military-tech" /></template>
            军衔
          </a-button>
        </a-space>
      </div>

      <!-- 不同图标库的示例 -->
      <div class="button-section">
        <h3>🌈 不同图标库示例</h3>
        <div class="icon-library-section">
          <h4>Material Symbols</h4>
          <a-space wrap>
            <a-button><Icon icon="material-symbols:home" /> 首页</a-button>
            <a-button><Icon icon="material-symbols:favorite" /> 收藏</a-button>
            <a-button><Icon icon="material-symbols:share" /> 分享</a-button>
          </a-space>
        </div>
        
        <div class="icon-library-section">
          <h4>Heroicons</h4>
          <a-space wrap>
            <a-button><Icon icon="heroicons:home" /> 首页</a-button>
            <a-button><Icon icon="heroicons:heart" /> 收藏</a-button>
            <a-button><Icon icon="heroicons:share" /> 分享</a-button>
          </a-space>
        </div>

        <div class="icon-library-section">
          <h4>Tabler Icons</h4>
          <a-space wrap>
            <a-button><Icon icon="tabler:home" /> 首页</a-button>
            <a-button><Icon icon="tabler:heart" /> 收藏</a-button>
            <a-button><Icon icon="tabler:share" /> 分享</a-button>
          </a-space>
        </div>
      </div>

      <!-- 使用说明 -->
      <div class="usage-section">
        <a-alert
          message="替换方法"
          type="success"
          show-icon
        >
          <template #description>
            <div>
              <p><strong>步骤 1:</strong> 将原来的图标导入删除</p>
              <p><strong>步骤 2:</strong> 使用 <code>&lt;Icon icon="图标名称" /&gt;</code> 替换</p>
              <p><strong>步骤 3:</strong> 在 <a href="https://icon-sets.iconify.design/" target="_blank">Iconify 官网</a> 查找合适的图标</p>
            </div>
          </template>
        </a-alert>
      </div>

    </a-card>
  </div>
</template>

<script setup>
import { 
  SearchOutlined, 
  PlusOutlined, 
  DeleteOutlined, 
  ImportOutlined, 
  ExportOutlined, 
  TeamOutlined 
} from '@ant-design/icons-vue'
</script>

<style scoped>
.iconify-button-example {
  padding: 20px;
}

.example-card {
  max-width: 1000px;
  margin: 0 auto;
}

.button-section {
  margin-bottom: 32px;
  padding: 20px;
  background: #fafafa;
  border-radius: 8px;
}

.button-section h3 {
  margin-bottom: 16px;
  color: #1890ff;
}

.icon-library-section {
  margin-bottom: 16px;
  padding: 16px;
  background: white;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
}

.icon-library-section h4 {
  margin-bottom: 12px;
  color: #262626;
  font-size: 14px;
}

.usage-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #f0f0f0;
}

.usage-section code {
  background: #f6f8fa;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

@media (max-width: 768px) {
  .button-section {
    padding: 16px;
  }
}
</style>
